<template>
  <main class="main">
    <Hero :item="featured" v-if="featured" />

    <ListingCarousel
      v-if="popular && popular.length"
      :title="popularTitle"
      :view-all-url="popularUrl"
      :items="popular"
    />

    <ListingCarousel
      v-if="topRated && topRated.length"
      :title="topRatedTitle"
      :view-all-url="topRatedUrl"
      :items="topRated"
    />

    <ListingCarousel
      v-if="onAir && onAir.length"
      :title="onAirTitle"
      :view-all-url="onAirUrl"
      :items="onAir"
    />

    <ListingCarousel
      v-if="airingToday && airingToday.length"
      :title="airingTodayTitle"
      :view-all-url="airingTodayUrl"
      :items="airingToday"
    />
  </main>
</template>
<script setup>
import { ref } from "vue";
import { getTvShows, getTvShow, getListItem } from "@/api";
import Hero from "@/components/Hero.vue";
import ListingCarousel from "@/components/ListingCarousel.vue";

const featured = ref(null);

const popular = ref([]);
const topRated = ref([]);
const onAir = ref([]);
const airingToday = ref([]);

getTvShows("popular").then((res) => {
  popular.value = res.results;

  getTvShow(res.results[0].id).then((tvShow) => {
    featured.value = tvShow;
  });
});

getTvShows("top_rated").then((res) => {
  topRated.value = res.results;
});

getTvShows("on_the_air").then((res) => {
  onAir.value = res.results;
});

getTvShows("airing_today").then((res) => {
  airingToday.value = res.results;
});

const popularTitle = getListItem("tv", "popular").title;

const popularUrl = { name: "tvCategory", params: { name: "popular" } };

const topRatedTitle = getListItem("tv", "top_rated").title;

const topRatedUrl = { name: "tvCategory", params: { name: "top_rated" } };

const onAirTitle = getListItem("tv", "on_the_air").title;
const onAirUrl = { name: "tvCategory", params: { name: "on_the_air" } };

const airingTodayTitle = getListItem("tv", "airing_today").title;
const airingTodayUrl = { name: "tvCategory", params: { name: "airing_today" } };
</script>
